<template>
	<om-page :title="pageTitle" class="om-font-size">
		<view class="margin-top-xs">
			<uni-list>
				<uni-list-item :extraText="pageTitle" @click="renameGroup" :showArrow="groupIsdefault ? false : true">
					<view>分组名称</view>
				</uni-list-item>
				<uni-list-item @click="sortGroup">
					<view>应用排序</view>
				</uni-list-item>
				<!-- <uni-list-item :showSwitch="true" :showArrow="false" :switchChecked="groupStatus" @switchChange="switchChange">
					<view>
						<view class="fl">分组状态</view>
						<view class="fr">{{ groupStatus == true ? '显示' : '隐藏' }}</view>
					</view>
				</uni-list-item> -->
			</uni-list>
			<view>
				<uni-card  style="border:none;" :titleUnderline="false" :is-full="true">
					<om-groupmenu :menuList="menuList" :colLen="5" :bordered="false" fontSize="small" :groupId="groupId" :defaultImg="true"></om-groupmenu>
				</uni-card>
			</view>
			<view class="padding flex" v-show="groupIsdefault ? false : true">
				<button @click="delGroup" class="om-btn-color" style="width: 100%; color: #FFF;">删除分组</button>
			</view>
		</view>
		<uni-popup  id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="margin popup-tip">
					修改分组
				</view>
				<view class="popup-item padding">
					<input type="text" class="txt" v-model="groupName" placeholder="请输入分组名称(＜10个字)" @input="handleInput" maxlength="9" />
				</view>
				<view class="margin flex justify-end">
					<a class="cancel-btn om-btn" @click="save">确定</a>
					<a class="cancel-btn om-cancel-btn" @click="cancel">取消</a>
				</view>
			</view>
		</uni-popup>
	</om-page>
</template>

<script>
	import {
		errorModal,
	} from '../../../static/js/common.js'
	export default {
		data() {
			return {
				pageTitle: '',
				groupId: -1,
				groupName: '',
				groupStatus: true,
				menuList: [],
				groupDetail: {},
				groupIsdefault: false,
			};
		},
		methods: {
			save(){
				let _that = this;
				_that.om.request('wxNewGroupMenu/renameGroup', {
					groupId: _that.groupId,
					groupName: _that.groupName
				},'post').then(res => {
					if (res.succeed) {
						_that.$refs.popup.close()
						_that.pageTitle = _that.groupName
					}else{
						_that.om.toast(res.msg);
					}
				});
			},
			cancel(){
				this.$refs.popup.close()
			},
			renameGroup(){
				if(!this.groupIsdefault){
					this.$refs.popup.open()
					this.groupName = this.pageTitle
				}
			},
			sortGroup(){
				uni.navigateTo({
					url: "/pages/main/group/apply-sort?groupId=" + this.groupId
				});
			},
			switchChange(e){
				let _that = this;
				_that.groupStatus = e.value
				_that.om.request('wxNewGroupMenu/editGroupStatus', {
					groupId: _that.groupId,
					groupStatus: _that.groupStatus
				},'post').then(res => {
					if (res.succeed) {
						
					}else{
						_that.om.toast(res.msg);
					}
				});
			},
			delGroup(){
				let _that = this;
				if(_that.menuList.length > 1){
					errorModal(_that, "提示信息",'请先将分组下的所有应用移到其他分组，再删除分组！', function() {
						
					});
					// uni.showToast({
					// 	title: '请先将分组下的所有应用移到其他分组，再删除分组！',
					// 	icon: 'none',
					// 	duration: 2000
					// })
				}else{
					uni.showModal({
						title: '删除分组',
						content: '你确定要删除这个分组吗？',
						showCancel: true,
						success(res){
							if(res.confirm){
								_that.om.request('wxNewGroupMenu/removeGroup', {
									groupId: _that.groupId,
								},'post').then(res => {
									if (res.succeed) {
										uni.navigateBack()
									}else{
										_that.om.toast(res.msg);
									}
								});
							}
						}
					})
				}
			},
			getGroupDetail(groupId){
				let _that = this;
				_that.om.request('wxNewGroupMenu/getAppList', {
					groupId: groupId
				}).then(res => {
					if (res.succeed) {
						let d= res.value;
						_that.pageTitle = d.groupName
						_that.groupStatus = d.groupStatus
						_that.groupIsdefault = d.isdefault
						_that.$nextTick(function() {
							let add = {
								text: "添加应用",
								iconCls: "/images/others/add-apply.png",
								h5url: ""
							}
							_that.menuList = [...d.menuList, add]
						})
					}
				});
			},
			handleInput(event){
				var val = event.target.value;
				val = val.replace(/#/g, '').substring(0, 10);
				this.groupName = val;
			},
		},
		onLoad(e) {
			this.groupId = e.groupId
		},
		onShow(e){
			this.getGroupDetail(this.groupId)
		}
	};
</script>

<style lang="scss" scoped>
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-item .txt{
		text-align: left;
		width: 100%;
	}
	.popup-tip{
		font-size: 16px;
		// color:#b0b0b0;
		color:#000;
	}
	.cancel-btn{
		margin: 15px auto 0;
	}
	.fr{
		float: right;
		color: #999;
		font-size: 14px;
		margin-right: 10px;
		margin-top: 2px;
	}
</style>
